<!DOCTYPE html>
<html class="ui-page-login">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>我的录像</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">
	<link href="css/style.css" rel="stylesheet" />
	<link href="css/reg_style.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/ljq.css" />
	<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
	<style type="text/css">
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 999;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
	</style>


	<!--App自定义的css-->
	<style type="text/css">
		.leftImage {
			margin-top: 10px;
			width: 45%;
			height: 200px;
			margin-left: 10px;
			float: left;
		}
		.rightImage {
			margin-top: 10px;
			width: 45%;
			height: 200px;
			margin-right: 10px;
			float: right;
		}



	</style>


	<style>
		.head1 .div1 {
			width: 90%;
		}

		.head1 .bianji {
			float: right;
			font-size: 0.16rem;
			margin-right: 0.12rem;
			/*margin-top: 0.1rem;*/
			color: #48a8ff;
		}

		.day_div {
			height: 0.4rem;
			line-height: 0.4rem;
			font-size: 0.12rem;
		}

		.day_div span {
			float: left;
			margin-left: 0.12rem;
			color: #4D4D4D;
		}

		.day_div em {
			float: right;
			margin-right: 0.12rem;
			color: #48a8ff;
		}

		ul {
			padding: 0!important;
			margin: 0!important;
		}

		ul li {
			display: block;
			padding: 0 0.01rem!important;
			margin: 0!important;
			position: relative;
			margin-top: 0.1rem!important;
		}

		ul img {
			display: block;
			width: 0.92rem!important;
			height: 0.92rem!important;
		}

		.xuanzhong {
			display: none;
			position: absolute;
			top: 0.05rem;
			right: 0.05rem;
			width: 0.15rem!important;
			height: 0.15rem!important;
		}

		.bot {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0.4rem;
			line-height: 0.4rem;
			border-top: 1px solid #ccc;
			background: #fff;
			z-index:999;
		}

		.bot span {
			float: left;
			font-size: 0.12rem;
			color: #ccc;
			width: 77%;
			text-align: center;
		}

		.bot img {
			width: 0.24rem;
			height: 0.24rem;
			margin-top: 0.08rem;
		}

		.bot .img1 {
			float: left;
			margin-left: 0.12rem;
		}

		.bot .img2 {
			float: right;
			margin-right: 0.12rem;
		}

		.zitiyanse {
			color: #4D4D4D!important;
		}
	</style>
</head>
<!--注意：选中前，视频没有“选中视频（隐藏）”，底部字体颜色是#ccc，视频是未点亮-->
	<!--注意：选中后，视频有“选中视频（显示）”，底部字体颜色是#4d4d4d，
	视频是点亮"选择"变成"取消选择"，头部"选择"变成"完成"-->

	<body>
		<header class="mui-bar mui-bar-nav head1">
			<em class="mui-action-back"><img class="img1" src="img/fanhui.png" alt="" /></em>
			<div class="div1"><span class="span0" id="list-shop-lists">我的录像</span><span id="photo_bianji" class="bianji">选择</span></div>
		</header>
		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="border:0px solid palevioletred;">
				<div class="mui-scroll" style="border:0px solid #0000CC;">
					<ul class="shuju2" id="photo_tupian" style="padding-top: 44px !important;">

					</ul>
				</div>
			</div>
			<!-- <div id="photo_tupian"> -->

		</div>
		<div class="bot">
			<img src="img/fenxiang1.png" alt="" class="img1" />
			<span>已选到<em class="em1" id="select_photo_num">0</em>张视频<!--，<em class="em2">2</em>个视频--></span>
			<img onclick="security_video_delete();" src="img/shanchu1.png" alt="" class="img2" />
		</div>
	</div>

	<!--/********************日期控件**************************/-->
		<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
		<!--/********************日期控件**************************/-->
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
		<input id='index-end-date' type="hidden" />
		<input id='index-start-date' type="hidden" />

		<!--/***************************************************/-->

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/mui.picker.min.js"></script>

		<script src="js/crypto-js.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/common.js?ver=20180210"></script>
		<script type="text/javascript" src="js/fuction.js?ver=20180210"></script>
		<script src="js/mui.zoom.js">    </script>
		<script src="js/mui.previewimage.js"></script>		
		<script type="text/javascript">
			mui.init();
		</script>
		<script type="text/javascript">
			var xout = 0;
			var count = 0;
			var pagenum = 10;
			var totalnum = 20;
			var pagesize = Math.floor(totalnum / pagenum);

			//被选择的相片
			var select_photo = [];

			$(document).ready(function() {

				$(".bianji").click(function() { //点击编辑按钮
					select_photo = [];
					if($(this).html().indexOf("选择") != -1) {
						$(".mui-media-object").removeAttr("data-preview-src");//减预览功能
						$(this).html("完成");
						$(".bot span").addClass("zitiyanse");
						$(".bot .img1").attr("src", "img/fenxiang2.png");
						$(".bot .img2").attr("src", "img/shanchu2.png");
						$(".today_xuanze").css('display', 'block');

					} else {
						
						$(".mui-media-object").attr("data-preview-src","video");//加预览功能
						$(this).html("选择");
						$(".bot span").removeClass("zitiyanse");
						$(".bot .img1").attr("src", "img/fenxiang1.png");
						$(".bot .img2").attr("src", "img/shanchu1.png");
						$(".today_xuanze").html("选择");
						$(".today_xuanze").css('display', 'none');
						$(".xuanzhong").css('display', 'none');

						//对选择好的相片进行 组合
						var x = $(".xuanzhong");
						$.each(x, function(index, item) {
							var y = x.eq(index).attr("id");
							var z = x.eq(index).data("valid", "0");
						});

					};
					//重新计算
					btn_xuanzhong();

				});

			});

			mui.ready(function() {
				//获取当前的客户数据
				xminereadyload();
			});

			//3.39 我的视频----查询我的视频列表
			function mine_storage_video_lists(count, pagenum) {
				var xbx = {};
				xbx.page = count;
				xbx.limit = pagenum; //分组limit
				//登录后的参数对象AES加密
				official_login_after(url_host + 'mine/storage/video_lists', xbx, 'mine_storage_video_lists');
			}


			//3.40 删除视频信息 
			function security_video_delete() {
				var xbx = {};
				xbx.id = select_photo; //id	Int|array	是	视频ID

				//登录后的参数对象AES加密
				official_login_after(url_host + 'security/video/delete', xbx, 'security_video_delete');

			}

			//统计所有被选择的东西
			function btn_xuanzhong() {
				//对选择好的相片进行 组合
				var x = $(".xuanzhong");
				select_photo = [];

				$.each(x, function(index, item) {
					var y = x.eq(index).attr("id");
					var z = x.eq(index).data("valid");
					if(z == "1") {
						select_photo.push(y);
					}
				});

				$("#select_photo_num").html(select_photo.length);
				//console.log(select_photo);

			}
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			/**
			 * 上拉加载具体业务实现
			 */
			 function pullupRefresh() {
			 	setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesize)); //参数为true代表没有更多数据了。

					//3.39 我的视频----查询我的视频列表				
					mine_storage_video_lists(count, pagenum);

				}, 800);
			 }
			 if(mui.os.plus) {
			 	mui.plusReady(function() {
			 		setTimeout(function() {
			 			mui('#pullrefresh').pullRefresh().pullupLoading();
			 		}, 1000);

			 	});
			 } else {
			 	mui.ready(function() {
			 		mui('#pullrefresh').pullRefresh().pullupLoading();
			 	});
			 }
			 $(function() {


				//mui触屏点击//点击单张视频按钮
				$("#pullrefresh").on('tap', '.mui-media-object', function(event) {
					var tmpimgcl = $(this).data("imgid");
					var tdisplay = $(tmpimgcl).css('display');
					var vplay=$(this).attr("data-preview-src");

					if(vplay=="video"){
						var vlink=$(this).attr("data-video");
						window.location.href=vlink;
					}else{
						if($("#photo_bianji").html().indexOf("完成") != -1) {
							if(tdisplay == 'none') {
								$(tmpimgcl).show();
								$(tmpimgcl).data("valid", "1");
							} else {
								$(tmpimgcl).hide();
								$(tmpimgcl).data("valid", "0");
							}
						}
					//统计被选择的视频
					btn_xuanzhong();			
				}


			});

				//mui触屏点击
				$("#pullrefresh").on('tap', '.today_xuanze', function(event) {
					//$(".today_xuanze").click(function() { //点击选择按钮
						var tmpbtncl = $(this).data("id");
						if($(this).html().indexOf("选择") != -1) {
						//显示全部选中
						$(tmpbtncl).css('display', 'block');
						$(tmpbtncl).data("valid", "1");
						$(this).html("取消");
					} else {
						//取消全部选中
						$(tmpbtncl).css('display', 'none');
						$(tmpbtncl).data("valid", "0");
						$(this).html("选择");
					}
					//统计被选择的视频
					btn_xuanzhong();
				});


			});
		</script>
		
		<script>



</script>			
</body>

</html>